<template>
  <div id="article" @click="$router.push(`/article_details/${article.id}`)">
    <img src="@/assets/professionalTeam.jpeg" alt="" v-if="article.img=='https://node.12380ch.com/upload/file-1587712318330.jpg'"/>
    <img :src="article.img" alt="" v-else/>
    <p>{{ article.name }}</p>
  </div>
</template>

<script>
export default {
  props: ["article"],
};
</script>

<style lang="less" scoped>
#article {
  background-color: white;
  width: 46.667vw;
  margin-top: 2.222vw;
  padding-bottom: 2.778vw;
  border-radius: 1.389vw;
  overflow: hidden;
  img {
    width: 100%;
    height: 29.722vw;
  }
  p {
    font-size: 3.333vw;
    padding: 1.389vw 0.833vw;
    height: 8vw;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
</style>
